<template>
    <div class="sjplatformAdd">
        <el-form label-width="100px">
            <el-form-item label="变更名称：">
                <el-input v-model="projectStore.changeModel.changeName" readonly />
            </el-form-item>
            <el-form-item label="项目名称：">
                <el-select v-model="projectStore.changeModel.projectName" clearable placeholder="请选择项目"
                    @update:modelValue="handleProjectNodeChange">
                    <el-option v-for="item in changeData.projectList" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="变更类型：">
                <el-select v-model="projectStore.changeModel.changeType" clearable placeholder="请选择变更类型"
                    @update:modelValue="handleNodeChangeType">
                    <el-option v-for="item in changeData.changeTypes" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="变更原因：">
                <el-input v-model="projectStore.changeModel.reason" type="textarea" />
            </el-form-item>
        </el-form>

        <div v-for="(info, cIndex) in projectStore.changeModel.changeInfos" :key="cIndex" class="sjplatform-form-item">
            <div class="title3" :key="info.id">
                变更{{ cIndex + 1 }}
                <el-tooltip :content="'删除变更' + (cIndex + 1)" placement="bottom" effect="light">
                    <i style="margin-left: 10px;" class="del-icon" @click="delChange(cIndex)"></i>
                </el-tooltip>
            </div>
            <el-form-item label="变更类型：">
                <el-select v-model="info.changeType" clearable placeholder="请选择变更类型"
                    @update:modelValue="handleNodeInfoChangeType(cIndex)">
                    <el-option v-for="item in changeData.infoChangeTypes" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <!--新增-->
            <template v-if="info.changeType == 1">
                <template v-if="projectStore.changeModel.changeType == 1">
                    <div class="title-div">
                        需求变更
                    </div>
                    <el-form-item label="父级需求：">
                        <el-input v-model="info.prName" @click="showRequirementTree(cIndex)" clearable
                            placeholder="点击选择父级需求" />
                    </el-form-item>
                    <RepuirementEdit :rId="info.prId" :rName="info.prName" :info="info" :changeType="info.changeType" v-model="info.changeRequirementInfos" />
                </template>
                <template v-if="projectStore.changeModel.changeType == 1 || projectStore.changeModel.changeType == 2">
                    <div class="title-div">
                        进度变更
                    </div>
                    <el-form-item label="父级进度：">
                        <el-input v-model="info.psName" @click="showScheduleTaskTree(cIndex)" clearable
                            placeholder="点击选择父级进度" />
                    </el-form-item>
                    <SchedulesEdit :sId="info.psId" :changeType="info.changeType"  :changeRequirements="info.changeRequirementInfos"
                        v-model="info.changeTasks" />
                </template>
            </template>
            <!--修正-->
            <template v-if="info.changeType == 2">
                <template v-if="projectStore.changeModel.changeType == 1">
                    <el-form-item label="需求：">
                        <el-input v-model="info.rName" @click="showRequirementTree(cIndex)" clearable
                            placeholder="点击选择要变更的需求" />
                    </el-form-item>
                    <template v-if="info.rId">
                        <RepuirementEdit :rId="info.rId" :info="info"/>
                    </template>
                </template>
                <template v-if="projectStore.changeModel.changeType == 1 || projectStore.changeModel.changeType == 2">
                    <el-form-item label="进度：">
                        <el-input v-model="info.rName" @click="showRequirementTree(cIndex)" clearable
                            placeholder="点击选择要变更的进度" />
                    </el-form-item>
                    <template v-if="info.rId">
                        <SchedulesEdit :rId="info.rId" />
                    </template>
                </template>
            </template>
            <!--删除-->
            <template v-if="info.changeType == 3">
                <el-form-item label="需求：">
                    <el-input v-model="info.rName" @click="showRequirementTree(cIndex)" clearable
                        placeholder="点击选择要变更的需求" />
                </el-form-item>
            </template>
            <!--  <el-form-item v-if="projectStore.changeModel.projectId && projectStore.changeModel.changeType == 1"
                :key="info.id" label="需求：">
                <el-input v-model="info.rName" @dblclick="showRequirementTree(cIndex)" clearable
                    placeholder="双击选择要变更的需求" />
                <el-tooltip :content="'删除变更' + (cIndex + 1)" placement="bottom" effect="light">
                    <i class="del-icon" @click="delChange(cIndex)"></i>
                </el-tooltip>
            </el-form-item>
            <el-form-item v-if="info.changeType == 1" label="父级需求：">
                <el-input v-model="info.rName" @click="showRequirementTree(cIndex)" clearable placeholder="点击选择父级需求" />
            </el-form-item>
            <el-form-item
                v-if="projectStore.changeModel.projectId && (projectStore.changeModel.changeType == 1 || projectStore.changeModel.changeType == 2)"
                label="进度：">
                <el-input v-model="info.sName" @dblclick="showRequirementTree(cIndex)" clearable
                    placeholder="双击选择要变更的进度" />
                <el-tooltip v-if="projectStore.changeModel.changeType == 2" :content="'删除变更' + (cIndex + 1)"
                    placement="bottom" effect="light">
                    <i class="del-icon" @click="delChange(cIndex)"></i>
                </el-tooltip>
            </el-form-item>
            <el-form-item v-if="info.changeType == 1" label="父级进度：">
                <el-input v-model="info.rName" @click="showRequirementTree(cIndex)" clearable placeholder="点击选择父级进度" />
            </el-form-item>
            <el-form-item v-if="projectStore.changeModel.projectId && projectStore.changeModel.changeType == 3"
                label="资源名称：">
                <el-select v-model="projectStore.changeModel.projectName" placeholder="请选择要变更的资源"
                    @update:modelValue="handleNodeChange">
                    <el-option v-for="item in changeData.projectList" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="变更内容：">
                <el-input v-model="info.contenet" type="textarea" />
            </el-form-item>
            <el-form-item label="时间变更：">
                <el-date-picker v-model="info.startTime" clearable type="date" placeholder="开始日期" />~<el-date-picker
                    v-model="info.endTime" clearable type="date" placeholder="结束日期" />
            </el-form-item> -->
        </div>
        <el-form label-width="100px">
            <el-form-item label="变更操作：">
                <el-tooltip content="添加变更" placement="bottom" effect="light">
                    <i class="add-icon" @click="addChangeItem"></i>
                </el-tooltip>
                <el-tooltip content="测试按钮" placement="bottom" effect="light">
                    <i class="edit-icon" @click="test"></i>
                </el-tooltip>
            </el-form-item>
        </el-form>
    </div>
    <el-dialog v-model="newRTVisible" title="选择需求" width="30%" draggable :destroy-on-close="true"
        :close-on-click-modal="false" class="fullscreen-dialog">
        <RequirementTree ref="rTreeRef" :projectId="projectStore.changeModel.projectId" />
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="confirm">确定</el-button>
            </span>
        </template>
    </el-dialog>
    <el-dialog v-model="newSTVisible" title="选择进度任务" width="30%" draggable :destroy-on-close="true"
        :close-on-click-modal="false" class="fullscreen-dialog">
        <SchedulesTree ref="sTreeRef" :projectId="projectStore.changeModel.projectId" />
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancelTask">取消</el-button>
                <el-button type="primary" @click="confirmTask">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import RequirementTree from '../Common/RequirementTree.vue';
import SchedulesTree from "../Common/SchedulesTree.vue";
import { useProjectChange } from "../../../hooks/ProjectManager/Supervisor/useProjectChange";
import commonUtil from '../../../utils/common';
import RepuirementEdit from "../Common/RepuirementEdit.vue";
import SchedulesEdit from "../Common/SchedulesEdit.vue";
import { useProjectSchedule } from "../../../hooks/ProjectManager/Plan/useProjectSchedule";
import { useProjectRequirement } from "../../../hooks/ProjectManager/Plan/useProjectRequirement";

let newRTVisible = ref(false);
let newSTVisible = ref(false);

let { changeData, projectStore, GetAllProjectByCreateUser } = useProjectChange(1, 10)
let { getScheduleTaskByRId,getScheduleEntityByProjectId } = useProjectSchedule(1, 10);
let { getRequirementEntityByProjectId } = useProjectRequirement(1, 10);

GetAllProjectByCreateUser(5);//5表示审批通过，正在进行的

//项目选择
function handleProjectNodeChange(value) {
    projectStore.changeModel.changeName = value + "变更申请";
    let selectedNode = changeData.projectList.find(item => item.value === value);
    if (selectedNode) {
        projectStore.changeModel.projectId = selectedNode.id;
        getScheduleEntityByProjectId(selectedNode.id);//进度计划基本信息
        getRequirementEntityByProjectId(selectedNode.id);//项目需求基本信息
    }
}
//变更类型选择
function handleNodeChangeType(value) {
    let selectedNode = changeData.changeTypes.find(item => item.value === value);
    if (selectedNode) {
        projectStore.changeModel.changeName = projectStore.changeModel.projectName + selectedNode.label + "变更申请";
    }
}

//变更项类型选择
function handleNodeInfoChangeType(index) {
    projectStore.changeModel.changeInfos[index].rId = '';
    projectStore.changeModel.changeInfos[index].rName = '';
}

/*--------------------变更处理开始--------------------*/
//添加变更
function addChangeItem() {
    if (projectStore.changeModel.projectId && projectStore.changeModel.changeType) {
        // 添加变更内容
        projectStore.changeModel.changeInfos.push({
            id: commonUtil.Methods.generateGUID(),
            projectId: projectStore.changeModel.projectId,
            mId: projectStore.changeModel.id,
            prId: '',
            prName: '',
            rId: '',
            rName: '',
            pfId: '',
            pfName: '',
            fId: '',
            fName: '',
            psId: '',
            psName: '',
            sId: '',
            sName: '',
            memberId: '',
            changeType: null,
            startTime: null,
            endTime: null,
            content: '',
            changeRequirementInfos: [],//变更的需求
            changeTasks: [],//变更的进度
        });
    }
    else {
        commonUtil.Methods.ShowMessage("warning", "请先选择变更的项目和变更类型！");
    }
}
//删除变更
function delChange(cIndex) {
    // 向指定变更的子项列表中添加新子项
    projectStore.changeModel.changeInfos.splice(cIndex, 1);
}
/*--------------------变更处理结束--------------------*/

/*--------------------关联需求开始--------------------*/
let indexTmp = 0;//临时存储任务索引
let rTreeRef = ref(null);
//显示需求树
function showRequirementTree(index) {
    newRTVisible.value = true;
    indexTmp = index;
}
//取消关联需求
function cancel() {
    indexTmp = 0;
    newRTVisible.value = false;
}

//确定关联需求
function confirm() {
    if (projectStore.changeModel.changeInfos[indexTmp].changeType == 1) {//新增
        projectStore.changeModel.changeInfos[indexTmp].prId = rTreeRef.value.exposeNode.id;
        projectStore.changeModel.changeInfos[indexTmp].prName = rTreeRef.value.exposeNode.value;
    } else {
        projectStore.changeModel.changeInfos[indexTmp].rId = rTreeRef.value.exposeNode.id;
        projectStore.changeModel.changeInfos[indexTmp].rName = rTreeRef.value.exposeNode.value;
    }

    //关联进度任务
    // console.log("projectStore.changeModel.changeInfos[indexTmp].rId",rTreeRef.value.exposeNode.id)
    getScheduleTaskByRId(rTreeRef.value.exposeNode.id);
    if (projectStore.taskModel && projectStore.changeModel.changeInfos[indexTmp].changeType == 1 && !projectStore.changeModel.changeInfos[indexTmp].psId) {//新增
        projectStore.changeModel.changeInfos[indexTmp].psId = projectStore.taskModel.id;
        projectStore.changeModel.changeInfos[indexTmp].psName = projectStore.taskModel.taskName;
    }
    // console.log("projectStore.taskModel",projectStore.taskModel)
    if(projectStore.changeModel.changeInfos[indexTmp].changeType != 1 &&  projectStore.taskModel && projectStore.taskModel.id) {
        projectStore.changeModel.changeInfos[indexTmp].sId = projectStore.taskModel.id;
        projectStore.changeModel.changeInfos[indexTmp].sName = projectStore.taskModel.taskName;
    }
    if(projectStore.changeModel.changeInfos[indexTmp].changeType == 1 && !projectStore.taskModel)
    {
        projectStore.changeModel.changeInfos[indexTmp].psId = '';
        projectStore.changeModel.changeInfos[indexTmp].psName = '';
    }

    indexTmp = 0;
    newRTVisible.value = false;
}
/*--------------------关联需求结束--------------------*/

/*--------------------选择进度任务开始--------------------*/
let sTreeRef = ref(null);
let indexsTmp = 0;//临时存储任务索引

//显示进度任务树
function showScheduleTaskTree(index) {
    indexsTmp = index;
    newSTVisible.value = true;
}
//取消关联进度任务
function cancelTask() {
    newSTVisible.value = false;
}

//确定关联进度任务
function confirmTask() {
    if (projectStore.changeModel.changeInfos[indexsTmp].changeType == 1) {//新增
        projectStore.changeModel.changeInfos[indexsTmp].psId = sTreeRef.value.exposeNode.id;
        projectStore.changeModel.changeInfos[indexsTmp].psName = sTreeRef.value.exposeNode.value;
    }
    else {
        projectStore.changeModel.changeInfos[indexsTmp].sId = sTreeRef.value.exposeNode.id;
        projectStore.changeModel.changeInfos[indexsTmp].sName = sTreeRef.value.exposeNode.value;
    }
    indexsTmp = 0;
    newSTVisible.value = false;
}
/*--------------------选择进度任务结束--------------------*/


function test() {
    console.log("projectStore.changeModel.changeInfos  changeRequirementInfos", projectStore.changeModel.changeInfos[0]);
    // console.log("projectStore.changeModel.changeInfos  refRepuirement", refRepuirement.value);
    // console.log("projectStore.changeModel.changeInfos  refSchedule", refSchedule.value);
}
</script>